// 页尾tab切换切换不同标题展示不同内容
import React, { useState } from 'react';

// 定义Tabs组件的属性类型
type TabProps = {
  tabs: string[]; // 选项卡的标题列表
  contents: React.ReactNode[]; // 与每个选项卡关联的内容列表
};

/**
 * Tabs 组件
 * @param tabs 选项卡的标题列表
 * @param contents 与每个选项卡关联的内容列表
 * 该组件渲染一组可切换的选项卡，每个选项卡显示相应的内容。
 */
const Tabs: React.FC<TabProps> = ({ tabs, contents }) => {
  // 使用React的useState钩子来管理当前活跃的选项卡索引
  const [activeIndex, setActiveIndex] = useState(0);

  // 返回组件的JSX结构
  return (
    <div>
      <div className="tabs">
         {/* 渲染选项卡标题按钮 */}
        {tabs.map((tab, index) => (
          <button
            key={index}
            className={index === activeIndex ? 'active' : ''} // 当前活跃的选项卡高亮显示
            onClick={() => setActiveIndex(index)} // 点击按钮切换到对应的选项卡内容
          >
            {tab}
          </button>
        ))}
      </div>
      <div className="content">
         {/* 显示当前活跃选项卡的内容 */}
        {contents[activeIndex]}
      </div>
    </div>
  );
};

// 导出Tabs组件以便在其他模块中使用
export default Tabs;